<template>
  <div class="content">
    <el-form ref="form" v-bind="getFormProps()">
      <heading grade="1">创建分组—步骤1</heading>
      <el-form-item label="当前参赛者数量：">
        59
      </el-form-item>
      <el-form-item label="需要分组数：" 
        prop="grounpAmount" 
        :rules="[
  					{ required: true, message: '分组数量不能为空'},
            Object.assign({trigger: 'blur', message: '每组参赛者数量需在4-8组之间'}, validator.rule.amountNumber)
  			]">
        <el-input class="normal-input" v-model="form.grounpAmount" placeholder="请输入需要分组的数"></el-input>
      </el-form-item>
      <el-form-item label="每组最少出线数量：" 
        prop="outLet" 
        :rules="[
  					{ required: true, message: '每组最少出线数量不能为空'},
            Object.assign({trigger: 'blur', message: '出线数量必须为2的N次方(N>=1)'}, validator.rule.isTwoPower)
  			]">
        <el-input class="normal-input" v-model="form.outLet" placeholder="请输入需要最少出线数"></el-input>
      </el-form-item>
      <div class="button-box">
        <el-form-item>
          <el-button type="primary" native-type="submit">下一步</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { form } from 'utils/mixins'
import validator from 'utils/validator'
export default {
  mixins: [form],
  data () {
    return {
      validator,
      form: {
        grounpAmount: '',
        outLet: ''
      }
    }
  },
  methods: {
    submit () {
      this.$router.push({
        path: '/race/detail/manage/cupsecond?id=' + this.$route.query.id +
              '&tasktype=' + this.$route.query.tasktype +
              '&matchtype=' + this.$route.query.matchtype +
              '&isRun=' + this.$route.query.isRun
      })
    }
  }
}
</script>

<style>
.el-form-item.is-required .el-form-item__label::before {
    content: '';
}
</style>

<style scoped>
.content .el-form-item__label {
  width: 150px
}
</style>
